/*
 * @Description:
 * @Author: 韩双双
 * @Date: 2021-04-21 14:07:50
 * @LastEditTime: 2021-04-27 20:12:05
 * @LastEditors: 李世千
 */
import useStore from '@/context/useStore';
import React, { useEffect } from 'react';
import styles from './Message.less';
import {} from 'umi';
import { Form, Input, Pagination } from 'antd';
import { observer } from 'mobx-react-lite';
import { timeAgo } from '@/utils/Time';
import { useHistory } from 'umi';
import Lmezt from '@/component/Lsel/Lmezt';
import logo from '@/img/chakantiezihuifu.png'
function Message() {
  const { about, article } = useStore();
  const history = useHistory();
  useEffect(() => {
    article.getArticleRecommend(); //推荐阅读
    about.getAbout(); //头部
  }, []);

  useEffect(() => {
    //分页
    about.MessagedGuestbook(about.AboutId.id, 1);
  }, [about.AboutId.id]);
  //分页事件
  function Btnchange(num: any) {
    about.MessagedGuestbook(about.AboutId.id, num);
  }
  
  //随机颜色
  const randomColor = () => {
    var col = '0123456789abcdef';
    var color = '#'; //保存颜色
    for (var i = 0; i < 6; i++) {
      var index = Math.floor(Math.random() * col.length);
      color += col[index];
    }
    return color;
  };
  
//跳详情
  function ItemBtn(id: number) {
    history.push(`/index/Details/${id}`);
  }

//回复
function reply(index:number) {
  // SetFlg(true);
  about.AboutList[index].pass=false
}

function pack(index:number){
  about.AboutList[index].pass=true
}
  return (
    <div className={styles.Message}>
      <div className={styles.content}>
        <div className={styles.logo}>
          {<img src={about.listAbout.cover} alt="" />}
        </div>

        <div className={styles.text}>
          <div
            dangerouslySetInnerHTML={{
              __html: about.listAbout.html || about.listAbout.content,
            }}
          ></div>
        </div>
      </div>

      <div className={styles.pl}>评论</div>
      <div className={styles.fieldss}>
        <Lmezt />
      </div>
      {about.AboutList.map((item: any,index:number) => {
        return (
          <div key={item.id} className={styles.container}>
            <div className={styles.center}>
              <li className={styles.head} style={{ background: randomColor() }}>
                {item.name.slice(0, 1)}
              </li>
              <li className={styles.heads}>{item.name}</li>
            </div>
            <div
              className={styles.box}
              dangerouslySetInnerHTML={{ __html: item.html || item.content }}
            ></div>
            <div className={styles.deyu}>
              <li>
                <span>{item.userAgent}</span>{' '}
                <span>大约{timeAgo(+new Date(item.createAt))}前</span>
              </li>
              <li className={styles.active}>    
                 <label className={styles.wx}>
                      <img src={logo} alt=""/>
                  </label>
                <span
                  onClick={() => {
                    reply(index);
                  }}
                >     
                  回复
                </span>
              </li>
            </div>
            {item.children.length > 0
              ? item.children.map((item: any) => {
                  return (
                    <div key={item.id} className={styles.ls}>
                      <div className={styles.lq}>
                        <li
                          className={styles.head}
                          style={{ background: randomColor() }}
                        >
                          {item.name.slice(0, 1)}
                        </li>
                        <li style={{ fontWeight: 900 }}>{item.name}</li>
                        回复
                        <li className={styles.cor}>{item.replyUserName}</li>
                      </div>
                      <div
                        className={styles.box}
                        dangerouslySetInnerHTML={{
                          __html: item.html || item.content,
                        }}
                      ></div>
                      <div className={styles.deyu}>
                        <li>
                          <span>{item.userAgent}</span>{' '}
                          <span>大约{timeAgo(+new Date(item.createAt))}前</span>
                        </li>
                        <li className={styles.active}>
                        <label className={styles.wx}>
                      <img src={logo} alt=""/>
                  </label>
                          <span
                            onClick={() => {
                              reply(index);
                            }}
                          >
                            回复
                          </span>
                        </li>
                      </div>
                    </div>
                  );
                })
              : ''}
                      {
                !item.pass ?  (<div className={styles.ale}>
          <div>
            <textarea name="" className={styles.area}  placeholder='请输入评论内容（可输入 Markerdown 语法内容）'></textarea>
          </div>
         <div>
  <input type="text" placeholder='请输入您的称呼'/>
  <input type="text" placeholder='请输入您的邮箱（不会公开，您也可以选择不输入）'/>
         </div>
        <div className={styles.bott}>
          <button onClick={()=>{pack(index)}}>收起</button>
          <button>评论</button>
        </div>
                </div>):('')
              }
          </div>
        );
      })}

      {/* < Lmezt/> */}
      <div className={styles.Pagination}>
        {/* 分页 */}
        <Pagination
          className={styles.Pagi}
          pageSize={6}
          total={about.total}
          onChange={Btnchange}
        />
      </div>

      <div className={styles.tuijian}>推荐阅读</div>

      <div>
        {article.articleRecommend.slice(0, 7).map((item: any) => {
          return (
            <div
              className={styles.liuyan}
              onClick={() => ItemBtn(item.id)}
              key={item.id}
            >
              <div className={styles.left}>
                <img src={item.cover} alt="" />
              </div>
              <div className={styles.right}>
                <li>{item.title.slice(0, 28)}</li>
                <ol>{item.summary ? item.summary.slice(0, 48) : null}</ol>
                <p>
                  <span>前端·{item.views} 次阅读</span>
                  <span>·{timeAgo(+new Date(item.createAt))}前</span>
                </p>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}
export default observer(Message);